<template>
<div>
  <p style="margin:12px 0">{{title[active-1]}}</p>
  <el-steps :active="active" finish-status="success">
  <el-step  v-for="(item,i) in title" :title="item" v-bind:key="i"></el-step>
</el-steps>
<Layout :isLoading='active'>
  <template #header1></template>
  <template #header2></template>
  <template #header3></template>
  <template #header4></template>
</Layout>
<el-button style="margin-top: 12px;" @click="back" v-if="active!=1">{{a}}</el-button>
<el-button style="margin-top: 12px;" @click="next">{{b}}</el-button>
</div>
</template>

<script>
import Layout from './item4/itemBig.vue';
  export default {
    data() {
      return {
        active: 1,
        title:['选择商品分类','填写商品信息','填写商品属性','选择商品关联'],
      };
    },
  computed:{
  a(){return '上一步,' + this.title[this.active-2]},
  b(){
  if(this.active>this.title.length-1){return '完成,提交商品'}
  else{
   return '下一步,' + this.title[this.active];
  }

  
  
  }
  },
    methods: {
      next() {
        if (this.active++ > this.title.length-1) this.active = this.title.length-1;
      },
      back(){
      if (this.active-- === 1) this.active = 1;
      }
    },
components:{
Layout,
}
  }
</script>

<style>

</style>